<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo01</title>
    <!--导入vue的js文件-->
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>
<div id="vue_det">
    <!--在vue中可以使用  {{data数据项的名字}} 可以获取data数据项的值，类似于el表达式 ${缓存变量名}-->
    <h1>site : {{site}}</h1>
    <input v-bind:value="site">
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
    <button v-on:click="changeMe">点击Me</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        // el 指定vue组件绑定的dom控件对象，必须的
        // el的值一般为 css或者jquery选择器的形式
        el: '#vue_det',

        // data是vue组件中的数据集合对象，这些数据可以通过模板标签进行绑定
        // 数据项的内容是，数据变量名: 数据值
        // 这些数据可以通过ajax或者其他的异步请求方式获取数据库的数据进行处理
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        // methods是vue组件绑定的行为方法，进行一些动作响应处理
        // 这些方法中可以使用ajax或者其他的异步请求方式获取数据库的数据，然后将这些数据更新给data，进而在vue的工作机制下，更新dom组件的值
        // vue的双向绑定原理：
        // vue使用data数据渲染控件的值，做到 data数据--->dom组件；
        // vue使用methods响应动作方法将dom控件的值同步给data；做到 dom组件--->data数据；
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            },
            changeMe: function () {
                console.log("click changeMe........");
                this.site = " - 学的不仅是技术，更是梦想！";
                console.log(this.site);
            },
            //可以直接定义给一个函数
            changeMe2:doss(),
        }


    })
    function dosss(){

    }
</script>
</body>
</html>